<template>
    <div style="width:100%">
        <el-row>
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_ORGMGR')">
                <div class="modules">
                    <div class="title">
                        <span>使用单位</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('orgForm')" v-if="power('WPTMGR_SYSMGR_ORGMGR:ADD')">
                                <i class="iconfont icon-xinzeng"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/Org',name:'使用单位'})"
                                v-if="power('WPTMGR_SYSMGR_ORGMGR:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_ROLEMGR')">
                <div class="modules">
                    <div class="title">
                        <span>角色管理</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('roleForm')" v-if="power('WPTMGR_SYSMGR_ROLEMGR:ADD')">
                                <i class="iconfont icon-xinzeng icon-xinzengdianji"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/Role',name:'角色管理'})"
                                v-if="power('WPTMGR_SYSMGR_ROLEMGR:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_DEPTMGR')">
                <div class="modules">
                    <div class="title">
                        <span>部门管理</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('departmentForm')"
                                v-if="power('WPTMGR_SYSMGR_DEPTMGR:ADD')">
                                <i class="iconfont icon-xinzeng icon-xinzengdianji"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/Department',name:'部门管理'})"
                                v-if="power('WPTMGR_SYSMGR_DEPTMGR:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_EXCEL')">
                <div class="modules">
                    <div class="title">
                        <span>EXCEL导入模板下载</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('Excel')" v-if="power('WPTMGR_SYSMGR_EXCEL:ADD')">
                                <i class="iconfont icon-xinzeng icon-xinzengdianji"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/excel',name:'excel模板'})"
                                v-if="power('WPTMGR_SYSMGR_EXCEL:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row class="rowTop">
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_PERSONMGR')">
                <div class="modules">
                    <div class="title">
                        <span>用户管理</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('personForm')" v-if="power('WPTMGR_SYSMGR_PERSONMGR:ADD')">
                                <i class="iconfont icon-xinzeng icon-xinzengdianji"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/Person',name:'用户管理'})"
                                v-if="power('WPTMGR_SYSMGR_PERSONMGR:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_PARAMETER')">
                <div class="modules">
                    <div class="title">
                        <span>系统参数设置</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('systemParameterForm')"
                                v-if="power('WPTMGR_SYSMGR_PARAMETER:ADD')">
                                <i class="iconfont icon-xinzeng icon-xinzengdianji"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/SystemParameter',name:'系统参数管理'})"
                                v-if="power('WPTMGR_SYSMGR_PARAMETER:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_DICTIONARY')">
                <div class="modules">
                    <div class="title">
                        <span>系统字典管理</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('systemDictionaryForm')"
                                v-if="power('WPTMGR_SYSMGR_DICTIONARY:ADD')">
                                <i class="iconfont icon-xinzeng icon-xinzengdianji"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/SystemDictionary',name:'系统字典'})"
                                v-if="power('WPTMGR_SYSMGR_DICTIONARY:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_SECURITYGROUP')">
                <div class="modules">
                    <div class="title">
                        <span>安全组</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('securityGroupForm')"
                                v-if="power('WPTMGR_SYSMGR_SECURITYGROUP:ADD')">
                                <i class="iconfont icon-xinzeng icon-xinzengdianji"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/SecurityGroup',name:'安全组'})"
                                v-if="power('WPTMGR_SYSMGR_SECURITYGROUP:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="rowTop">
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_APPINFO')">
                <div class="modules">
                    <div class="title">
                        <span>应用管理</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('appInfoForm')" v-if="power('WPTMGR_SYSMGR_APPINFO:ADD')">
                                <i class="iconfont icon-xinzeng icon-xinzengdianji"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/AppInfo',name:'应用管理'})"
                                v-if="power('WPTMGR_SYSMGR_APPINFO:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" v-if="power('WPTMGR_SYSMGR_APPVERSION')">
                <div class="modules">
                    <div class="title">
                        <span>应用版本管理</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleDialogFormOpen('appVersionForm')"
                                v-if="power('WPTMGR_SYSMGR_APPVERSION:ADD')">
                                <i class="iconfont icon-xinzeng icon-xinzengdianji"></i>
                                <span>新增</span>
                            </li>
                            <li @click="handleWindowOpen({path:'/Home/SystemS/AppVersion',name:'应用版本管理'})"
                                v-if="power('WPTMGR_SYSMGR_APPVERSION:QUERY')">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <!--LT 登录信息查询-->
            <el-col :span="6" v-if="power('TALLY_TERMINAL_LOGIN')">
                <div class="modules">
                    <div class="title">
                        <span>登录信息查询</span>
                    </div>
                    <div class="handle">
                        <ul>
                            <li @click="handleWindowOpen({path:'/Home/LoginInfo/LoginInfo',name:'登录信息查询'})">
                                <i class="iconfont icon-chaxun"></i>
                                <span>查询</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>
        <org-form ref="orgForm"></org-form>
        <role-form ref="roleForm"></role-form>
        <department-form ref="departmentForm"></department-form>
        <person-form ref="personForm"></person-form>
        <system-parameter-form ref="systemParameterForm"></system-parameter-form>
        <system-dictionary-form ref="systemDictionaryForm"></system-dictionary-form>
        <security-group-form ref="securityGroupForm"></security-group-form>
        <app-info-form ref="appInfoForm"></app-info-form>
        <app-version-form ref="appVersionForm"></app-version-form>
        <!-- excel新增 -->
        <el-dialog title="excel新增" :visible.sync="formVisible" :before-close="handleCancel"
                   :close-on-click-modal="false" width="1020px"
                   top="2vh" class="excelO">
            <el-form ref="form" :model="excelTemplate" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="模板名称：" prop="name">
                            <el-input v-model="excelTemplate.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="模板代码：" prop="code">
                            <el-input v-model="excelTemplate.code"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="备注：" prop="remark">
                            <el-input v-model="excelTemplate.remark" type="textarea" :autosize="{ minRows: 3 }"
                                      :maxlength="$length"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="起始行：" prop="startLine">
                            <el-input-number v-model="excelTemplate.startLine"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <section>
                    <div style="margin-bottom: 20px">
                        <h3>字段信息</h3>
                        <div>
                            <el-button @click="excelTemplate.excelModelRules.push({})" icon="el-icon-plus">增加
                            </el-button>
                        </div>
                    </div>
                    <el-table :data="excelTemplate.excelModelRules" border max-height="300">
                        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                        <el-table-column label="字段名" width="140">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.chineseTitle"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="字段代码" width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.englishTitle"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="必须">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.isMust"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="参数类型" width="120">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.type" placeholder="状态选择">
                                    <el-option v-for="[key, val] of _dictExcelFieldTypes" :label="val" :value="key"
                                               :key="key"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="demo" label="示例字段" width="160">
                            <template slot-scope="scope">
                                <el-input type="textarea" :maxlength="$length" :rows="2"
                                          v-model="scope.row.demo"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pack" label="校验规则" width="160">
                            <template slot-scope="scope">
                                <el-input type="textarea" :maxlength="$length" :rows="2"
                                          v-model="scope.row.rule"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="140" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button size="small" class="danger" type="text" @click="removeField(scope.$index)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </section>
            </el-form>
            <div slot="footer">
                <el-button @click.native="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleSubmitExcelTemplate">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import orgForm from '../system/orgForm'
    import roleForm from '../system/roleForm'
    import departmentForm from '../system/departmentForm'
    import personForm from '../system/personForm'
    import systemParameterForm from '../system/systemParameterForm'
    import systemDictionaryForm from '../system/systemDictionaryForm'
    import securityGroupForm from '../system/securityGroupForm'
    import appInfoForm from '../system/appInfoForm'
    import appVersionForm from '../system/appVersionForm'
    import {
        saveExcelTemplate
    } from '@/api/excel/index'

    export default {
        name: "index",
        components: {
            orgForm,
            roleForm,
            departmentForm,
            personForm,
            systemParameterForm,
            systemDictionaryForm,
            securityGroupForm,
            appInfoForm,
            appVersionForm
        },
        data() {
            return {
                formVisible: false,
                excelTemplate: this.initExcelTemplate(),
            }
        },
        mounted() {

        },
        methods: {
            portSearch() {
                // window.open("http://localhost:8080/#/Home/port")
            },
            handleDialogFormOpen(val) {
                if (val !== 'Excel') {
                    this.$refs[val].dialogForm = true
                } else {
                    this.formVisible = true
                }
            },
            handleWindowOpen(url) {
                // this.$router.push(url)
                this.$store.commit('ADD_CACHED_VIEWS', url)
                this.$router.push(url.path)
            },
            handleCancel() {
                this.excelTemplate = this.initExcelTemplate()
                this.formVisible = false
            },
            initExcelTemplate() {
                return {
                    excelModelRules: []
                }
            },
            handleSubmitExcelTemplate() {
                saveExcelTemplate(this.excelTemplate).then(() => {
                    this.$message({
                        message: '新增excel模板成功',
                        type: 'success'
                    })
                    this.handleCancel()
                })
            }
        }
    }

</script>

<style scoped lang="scss">
    .modules {
        min-width: 200px;
        max-width: 270px;
        width: 90%;
        height: 150px;
        border: 1px solid #e4e7ed;
        border-radius: 10px;
        margin: 0 auto;
    }

    .title {
        width: 100%;
        height: 45px;
        background: #ecf0fd;
        text-align: center;
        overflow: hidden;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        span {
            font-size: 18px;
            color: black;
            font-weight: 500;
            display: block;
            margin-top: 10px;
        }
    }

    .handle {
        ul {
            list-style: none; // display: inline-block;
            width: 100%;
            text-align: center;
            li {
                display: inline-block;
                width: 45px;
                margin-top: 6px;
                width: 23%;
                text-align: center;
                i {
                    font-size: 45px;
                    color: #4c62e2;
                }
                span {
                    display: inherit;
                }
            }
        }
    }

    .flow {
        font-size: 11px;
        color: #9b9b9b;
    }

    .flow-left {
        float: left;
        margin-left: 73px;
    }

    .flow-right {
        float: right;
        margin-right: 45px;
    }

    .rowTop {
        margin-top: 22px;
    }

    .excelO {
        .el-form-item {
            .el-input {
                width: 220px;
            }
            .el-textarea {
                width: 220px;
            }
        }
        .dialog-footer {
            margin-top: 20px;
        }
    }

</style>
